<script>
import {defineComponent} from 'vue'
import store from "@/stores/store";
import axios from "axios";
import router from '../../router';

export default defineComponent({
    name: "account-page",
    data(){
		return {
        //新密码和确认新密码
        password:"",
        re_password:"",
        //用于判断修改密码是否相同
        pwd_legal:"true",
        // usr_account : {}

        usr_account:store.getters.getAccount
		  }
	  },
    computed: {
        //检测两次密码输入是否一致
        passwordMisMatch() {
            return this.password !== this.re_password;
        },
    },
    watch :{
        //监听重复密码
        re_password(newval,oldval){
            if(newval !== this.password){
                //重复密码不相同则报错
                this.pwd_legal = false;
                console.log(this.pwd_legal)
            }else{
                //重复密码相同则不报错
                this.pwd_legal = true;
                console.log(this.pwd_legal)
            }
        },
        account(newval){
            this.account = newval.account;
        }
    },

    methods : {
        demo(){
				  console.log(JSON.stringify(this.userInfo))
			  },
        save(e){
          //创建对象
          e.preventDefault()
          console.log(this.usr_account.username)
        },
        update_axios(account){
			    return axios({
				    url:'http://localhost:8080/users',
				    method:'PUT',
				    withCredentials: true,
				    data:{
                userid:this.usr_account.username,
                password:this.usr_account.password,
                firstname:this.usr_account.firstname,
                lastname:this.usr_account.lastname,
                phone:this.usr_account.phone,
                email:this.usr_account.email,
                addr1:this.usr_account.addr1,
                addr2:this.usr_account.addr2,
                city:this.usr_account.city,
                state:this.usr_account.state,
                zip:this.usr_account.zip,
                country:this.usr_account.country
            }
			    })
		    },
        update(e){
            e.preventDefault()
            if(this.pwd_legal){
                //若密码合法则进行异步请求
                // alert("密码验证成功")
                const promise = this.update_axios(this.usr_account)
                promise.then(
                    response => {
                        alert("修改成功！")
                        console.log("发送成功!")
                    }
                ).catch((error) => {
                        console.error('异常',error)
                    }
                )
            }else{
                alert("密码不一致，请重新输入！")
                // console.log("密码不一致，请重新输入！")
            }
        },
        to_Order_page(){
            router.push('/order');
        },
        to_Main_Page(){
            router.push('/index');
        }
    }
})
</script>

<template>
    <!-- 导航捏 -->
    <div class="crumb">
        <div class="w">
            <div class="crumb-content">
                <span class="link" @click="to_Main_Page">MyStore</span>
                <span>></span>
                <span class="link-text">Account</span>
            </div>  
        </div>
    </div>
    <div id="main">
        <form>
            <!-- 整个账户页面 默认显示为原有信息-->
            <div id="account">
                <!-- 用户信息部分 -->
                <div class="user_information">
                    <!-- 标题 -->
                    <div class="information">
                        <label class="icon"></label>
                        <label class="title">User Information</label>
                    </div>
                    <!-- 用户id  不可更改-->
                    <div class="attribute">
                        <label class="ui">Username:</label>
                         <label id="username">{{usr_account.username}}</label>
                    </div>
                    <!-- 用户密码 -->
                    <div class="attribute">
                        <label class="ui">New Password:</label>
                        <input type="password" class="password" id="password" v-model="password">
                        
                    </div>
                    <!-- 重复密码 默认为空 若密码更改则重复密码必须和密码一致 -->
                    <div class="attribute">
                        <label class="ui">Repeat Password:</label>
                        <input type="password" class="password" id="re_password" v-model="re_password">
                        <label class="warning" v-if="passwordMisMatch">两次输入不一致！</label>
                    </div>
                </div>
    
                <!-- 账户信息部分 -->
                <div class="account_information">
                    <!-- 标题 -->
                    <div class="information">
                        <label class="icon"></label>
                        <label class="title">Account Information</label>
                    </div>
                    <!-- 姓 -->
                    <div class="attribute" id="name1st">
                        <label class="ui">First Name:</label>
                        <input type="text" class="inputBox" id="firstname" v-model="usr_account.firstname">
                    </div>
                    <!-- 名 -->
                    <div class="attribute">
                        <label class="ui">Last Name:</label>
                        <input type="text" class="inputBox" id="lastname" v-model="usr_account.lastname">
                    </div>
                    <!-- 电话号码 -->
                    <div class="attribute">
                        <label class="ui">Phone Number:</label>
                        <input type="text" class="inputBox" id="phone_number" v-model="usr_account.phone">
                    </div>
                    <!-- 邮箱 -->
                    <div class="attribute">
                        <label class="ui">Email:</label>
                        <input type="email" class="inputBox" id="email" v-model="usr_account.email">
                    </div>
                    <!-- 地址1 -->
                    <div class="attribute">
                        <label class="ui">Address 1:</label>
                        <input type="text" class="inputBox" id="address1" v-model="usr_account.addr1">
                    </div>
                    <!-- 地址2 -->
                    <div class="attribute">
                        <label class="ui">Address 2:</label>
                        <input type="text" class="inputBox" id="address2" v-model="usr_account.addr2">
                    </div>
                    <!-- 城市 -->
                    <div class="attribute">
                        <label class="ui">City:</label>
                        <input type="text" class="inputBox" id="city" v-model="usr_account.city">
                    </div>
                    <!-- 州 -->
                    <div class="attribute">
                        <label class="ui">State:</label>
                        <input type="text" class="inputBox" id="state" v-model="usr_account.state">
                    </div>
                    <!-- 邮编 -->
                    <div class="attribute">
                        <label class="ui">Zip:</label>
                        <input type="text" class="inputBox" id="zip" v-model="usr_account.zip">
                    </div>
                    <!-- 国家 -->
                    <div class="attribute">
                        <label class="ui">Country:</label>
                        <input type="text" class="inputBox" id="country" v-model="usr_account.country">
                    </div>
                </div>
            </div>
            <!-- 保存 -->
            <div class="btnLine">
                <button class="accountBtn" @click="update">Save My Information</button>
            </div>
            <div class="toOrder">
                <!-- My Order -->
                <label class="order" @click="to_Order_page">To My Order</label>
            </div>
        </form>
    </div>
</template>

<style scoped>

    .crumb{
        height: 50px;
        line-height: 50px;
        background: #eee;
        color: #888;
        font-size: 14px;
        border-top: 2px solid #215496;
        margin-bottom: 10px;
    }
    .w{
    width: 1080px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /*清除浮动，查资料*/
    }

    .link{
        color: #999;
        cursor: pointer;
        text-decoration: none;
    }

    .link:hover{
        color: #215496;
    }

    .link-text{
        color: #999;
        text-decoration: none;
    }

    label{
        cursor:default;
    }

    #main{
        overflow: hidden;
        width: 700px;
        height: 100%;
        margin: 10px auto 100px;
        border: 1px solid #e1e2e5;
        box-shadow: 0 2px 4px rgba(0,0,0,.14);
        background: #fafafa;
        border-radius: 4px;
    }

    #name1st{
        margin-top: 20px;
    }

    #username{
        width: 185px;
        color: #215496;

    }

    .information{
        text-align: left;
        border-bottom: 1px solid #7a899c;
    }

    .title{
        height:21px;
        text-align: left;
        margin:10px 5px;
        position:static;
        top: 100px;

    }

    .icon{
        width: 4px;
        height: 16px;
        margin-left: 80px;
        border: #215496;
        border-radius: 2px;
        background-color: #215496;

    }

    .attribute{
        margin-top: 11px;
    }

    .ui{
        width: 270px;
        height: 30px;
        text-align: right;
        margin-right: 80px;
    }

    .inputBox{
        width: 190px;
        color: #888;
        border:1px solid #999;
        border-radius: 2px;
        transition: border-color 0.2s ease;
        outline: none;
    }

    .inputBox:hover{
        border:1px solid #444;
    }

    .inputBox:focus{
        border:1px solid #409eff;
    }

    .password{
        width: 190px;
        color: #888;
        border:1px solid #999;
        border-radius: 2px;
        transition: border-color 0.5s ease;
        outline: none;
    }

    .password:hover{
        border:1px solid #444;
        transition: border-color 0.5s ease;
    }

    .password:focus{
        border:1px solid #409eff;
    }

    .warning{
        margin-left: 20px;
    }
    .select{
        width: 190px;
        height:28px;
        color: #888;
        padding: 1px 2px 1px 2px;
        border:1px solid #999;
        border-radius: 2px;
        transition: border-color 0.5s ease;
    }

    .checkbox{
        transform: scale(1.5);
        margin-left: 89px;
    }
    
    .btnLine{
        text-align: center;
        margin: 50px 0 20px;
    }

    .accountBtn{
        background-color: #215496; /* Green */
        border: none;
        color: white;
        padding: 10px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }

    .accountBtn:hover{
        background-color: #2d75d2;
    }

    .toOrder{
        text-align: center;
    }

    .order{
        color: #215496;
        margin-bottom: 50px;
        cursor:pointer;
    }

    .order:hover{
        color: #2d75d2;
    }
</style>
